<template>
  <view class="search_list">
    <!-- <block v-for="(item, index) in goods_list"
           :key="item.goods_id"> -->
    <u-swipe-action v-for="(item, index) in goods_list"
                    :index="index"
                    :key="item.goods_id"
                    @click="handleDel()"
                    :options="options"
                    :disabled="!isCart">
      <navigator :url="'/pages/goods_detail/goods_detail?goods_id='+item.goods_id"
                 open-type="navigate"
                 class="search_list_item">
        <view class="image_wrap">
          <image src="https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg"></image>
        </view>
        <!-- 右侧内容 -->
        <view class="main">
          <view class="goods_name">
            {{ item.goods_name }}
          </view>
          <!-- 底部 -->
          <view class="footer"
                v-if="item.goods_price">
            <!-- 价格 -->
            <view class="goods_price">
              <small>￥</small>{{ item.goods_price }}
            </view>
            <!-- 步进器 -->
            <u-number-box v-if="isCart"
                          v-model="item.num"
                          :index="index"
                          :max="item.goods_number"
                          @change="handleNumChange()"></u-number-box>
          </view>
        </view>
      </navigator>
    </u-swipe-action>
    <!-- </block> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d',
          },
        },
      ],
    }
  },
  props: {
    goods_list: {
      type: Array,
      default: [],
    },
    isCart: {
      default: false,
      type: Boolean,
    },
  },
  name: 'goods-list',
  methods: {
    handleNumChange({ value, index }) {
      this.$emit('handleNumChange', { value, index })
    },
    handleDel(index1) {
      // console.log(index1)
      this.$emit('handleDel', index1)
    },
  },
}
</script>

<style lang="less" scoped>
.search_list {
  padding: 15rpx 26rpx;

  .search_list_item {
    width: 698rpx;
    height: 209rpx;
    overflow: hidden;
    border-bottom: 1rpx solid #ccc;
    display: flex;
    .image_wrap {
      width: 190rpx;

      image {
        height: 190rpx;
        width: 100%;
      }
    }
    .main {
      padding: 30rpx 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: space-between;
      margin-right: 30rpx;
      .goods_name {
        font-size: 24rpx;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .footer {
        display: flex;
        justify-content: space-between;
        .goods_price {
          display: flex;
          color: #ea4350;
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
